import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux'
import _ from 'lodash'

import { Table, Tabs, Icon, Tag, Form,  Button, message, Modal, Input} from 'antd';
import { changePage, _maskRender } from '../../store/actions';
const TabPane = Tabs.TabPane;

import SearchInput from '../../components/search-input'
const _data_={
    consultOrder :[
        {
            name:'刘三',
            age:'21',
            type:'离线咨询',
            modality:'CT',
            specialist:'刘一手',
            date: '2015-12-05 12:30',
            status:-1
        }, {
            name:'李五四',
            age:'34',
            type:'在线互动',
            modality:'CT',
            specialist:'刘二手',
            date: '2015-12-05 12:30',
            status:1
        }, {
            name:'王七',
            age:'12',
            type:'紧急咨询',
            modality:'CT',
            specialist:'刘百手',
            date: '2015-12-05 12:30',
            status:0
        }
    ]};

class _pane1 extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            user: this.props.user,
            data: this.props.data
        };
    }
    render(){
        const columns = [{
            title: '咨询人',
            dataIndex: 'name'
        }, {
            title: '年龄',
            dataIndex: 'age'
        }, {
            title: '咨询类型',
            dataIndex: 'type'
        }, {
            title: '专家',
            dataIndex: 'specialist'
        }, {
            title: '咨询时间',
            dataIndex: 'date'
        }, {
            title: '状态',
            dataIndex: 'status',
            render(text){
                switch (text){
                    case 0:
                        return <span style={{color:'red'}}>待审核</span>;
                    case 1:
                        return <span style={{color:'green'}}>已通过</span>;
                    default:
                        return <span style={{color:'#999'}}>驳回</span>
                }
            }
        }, {
            title: '操作',
            render(){
                return (
                  <a href="#">审核</a>
                )
            },
            width:64
        }];
        const pagination = {
            total: this.state.data.length,
            showSizeChanger: true,
            onShowSizeChange(current, pageSize) {},
            onChange(current) {}
        };
        return (
          <div>
              <div style={{overflow: 'hidden', marginBottom: '10px', padding: '10px 0'}}>
                  <div style={{float:'right'}}>
                      <SearchInput style={{ width: 200 }} onSearch={function(){}} placeholder='请输入关键字查询' />
                  </div>
              </div>
              <Table
                pagination={pagination}
                columns={columns}
                dataSource={this.state.data}
              />
          </div>
        )
    }
}
class _LoggerManage extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            active:'1',
            defaultActiveKey:'1'
        };
        this.changeTag = this.changeTag.bind(this)
    }
    componentDidMount(){
        _maskRender();
    }
    componentWillMount(){
        this.props.dispatch(changePage('consult-manage'))
    }
    changeTag(e){
        this.setState({
            active:e
        })
    }
    render(){
        return (
          <div>
              <Tabs
                defaultActiveKey={this.state.defaultActiveKey}
                activeKey={this.state.active}
                onTabClick={this.changeTag}
                size="default"
              >
                  <TabPane tab="咨询审核" key="1">
                      <_pane1 data={_data_.consultOrder} user={this.props.user} dispatch={this.props.dispatch} />
                  </TabPane>
                  <TabPane tab="历史咨询" key="2">
                      {/*<_pane3 user={this.props.user} dispatch={this.props.dispatch} />*/}
                  </TabPane>
              </Tabs>
              <div id="_mask"></div>
          </div>
        )
    }
}
let LoggerManage;
export default LoggerManage = connect((state)=>{
    const {user} = state.rootReducer,
      {search,query} = state.routing.locationBeforeTransitions;
    return {user,search,query}
})(_LoggerManage)

